<template>
    <BPTable ref='tableRef' align='center' row-key='id' name-key='name' :columns='columns' :api='page' :buttons='buttons'>
        <template #enable='{record}'>
            <a-tag v-if='record.enable' color='success'>{{$t('enable')}}</a-tag>
            <a-tag v-else>{{$t('disable')}}</a-tag>
        </template>
        <template #$action="{record}">
            <BTextButton @click='openSetDeviceParams(record)'>下发参数</BTextButton>
        </template>
    </BPTable>

    
    <BDrawer v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <Edit :row="currentRow" ref="formRef" />
    </BDrawer>

    <BDrawer v-model:visible='visibleOfParams' title='设置设备运行参数' width='600px' :confirm='submitParams'>
        <SetDeviceParams :row="currentRow" ref="formRefOfParams" />
    </BDrawer>
</template>

<script lang='ts' setup>
    import { pageApi, deleteApi } from '@/api/DeviceParams'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import { useI18nStore } from '@/store/i18n'
    import Edit from '@/pages/Components/DeviceParamsEdit.vue';
    import SetDeviceParams from './SetDeviceParams/index.vue'

    async function page(params:any) {
        const r = await pageApi(params)
        if(r.success && r.data.rows) {
            r.data.rows.forEach(row => {
                row.options = row.options ? JSON.stringify(row.options) : ''
            })
        }
        return r
    }


    const visibleOfParams = ref(false)
    const formRefOfParams = ref()
    function openSetDeviceParams(row) {
        currentRow.value = row
        visibleOfParams.value = true
    }
    async function submitParams() {
        const res = await formRefOfParams.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }


    const i18n = useI18nStore()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const tableRef = ref()

    const currentRow = ref<any>()
    const currentCategory = ref()

    function onChangeCategory(e) {
        currentCategory.value = e
        tableRef.value.load()
    }


    const buttons = ref<SearchButton[]>([])

    buttons.value.push({
        button : 'add',
        func : () => {
            currentRow.value = null
            dialogTitle.value = i18n.t('add')
            visible.value = true
        }
    })


    const columns = ref<Column[]>([
        {
            title : i18n.t('name'),
            dataIndex : 'name',
            inSearch : true,
        },


        {
            title : '设备类型',
            dataIndex : 'deviceTypeId',
            align : 'center',
            customRender({record}) {
                return record.deviceType ? record.deviceType.name : ''
            }
        },

        {
            title : '参数',
            dataIndex : 'params',
            align : 'center',
            customRender({record}) {
                return record.paramsExplain ? JSON.stringify(record.paramsExplain) : ''
            }
        },


        {
            title : i18n.t('operation'),
            dataIndex : '$action',
            align : 'center',
            $edit : (row) => {
                currentRow.value = row
                dialogTitle.value = i18n.t('update')
                visible.value = true
            },

            $delete : async (row) => {
                const res = await deleteApi(row.id)
                if(res.success) {
                    message.success(i18n.t('deleteSuccess'))
                    tableRef.value.load()
                }else {
                    message.error(res.msg)
                }
            }
        }
    ])


    async function submit() {
        const res = await formRef.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }

    
</script>

<style lang="scss" module>
    .container{
        display: flex;
        .category{
            width: 250px;
            border-right: 1px solid $borderColor;
        }
        .table{
            flex: 1;
        }
    }
</style>